<template>
  <div class="app-container">
    <el-page-header content="详情" style="padding: 20px" @back="goBack" />
    <!-- 问题描述 -->
    <div class="comment-container">
      <span class="info-span">问题描述</span>
      <div class="title-container">
        {{ title }}
      </div>
      <el-divider />
      <!-- 评论内容 -->
      <span class="info-span">评论</span>
      <div class="comment-box">
        <div class="first-comment">
          <!-- 一级评论 -->
          <div v-for="(acomment, i) in commentList" :key="i">
            <div class="author-info">
              <b class="author-name">{{ acomment.reluser }}
                <span class="reply-icon" @click="showReplyInput(i, acomment.reluser, acomment.r1id)">
                  <i class="iconfont el-icon-s-comment" />
                  回复
                </span>
              </b>
              <span class="time-info">{{ acomment.reltime }}</span>
            </div>
            <!-- 一级评论内容 -->
            <p class="content-box">{{ acomment.maintext }}</p>
            <!-- 二级评论 -->
            <div class="reply-container">
              <div class="relpy-box">
                <div v-for="(reply, j) in acomment.reply" :key="j">
                  <div class="author-info">
                    <b class="author-name">{{ reply.reluser }} <span class="reply-to">回复:{{ reply.repuser }}</span>
                      <span class="reply-icon" @click="showReplyInput(i, reply.reluser, reply.r2id)">
                        <i class="iconfont el-icon-s-comment" />
                        回复
                      </span>
                    </b>
                    <span class="time-info">{{ reply.reltime }}
                    </span>
                  </div>
                  <p class="content-box">{{ reply.maintext }}</p>
                </div>
              </div>
            </div>
            <!-- 二级评论回复输入框 -->
            <div v-show="_inputShow(i)" class="reply-input">
              <el-form ref="secReplyForm" :model="secReplyForm" :rules="replyRule">
                <el-form-item prop="maintext">
                  <el-input
                    v-model="secReplyForm.maintext"
                    type="textarea"
                    placeholder="二级回复..."
                    maxlength="100"
                    show-word-limit
                  />
                </el-form-item>
              </el-form>
              <div class="reply-button">
                <el-button type="primary" size="small" @click="handleCreateSecReply(i)">提交</el-button>
              </div>
            </div>
            <el-divider />
          </div>
        </div>
      </div>
      <!-- 发表回复 -->
      <el-divider />
      <div class="comment-div-container">
        <el-form
          ref="commentForm"
          :model="commentForm"
          :rules="commentRule"
          :hide-required-asterisk="true"
        >
          <el-form-item label="发表回复:" label-width="80px" prop="maintext">
            <el-input
              v-model="commentForm.maintext"
              type="textarea"
              placeholder="回复..."
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <div class="buttons-container">
          <el-button type="primary" style="margin-left: 85%; width: 100px" @click="handleFirstComment">发表</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getComment, createFirstComment, createSecondComment } from '@/api/issue'

export default {
  name: 'IssueComment',
  data() {
    return {
      title: '',
      commentForm: {
        maintext: '',
        id: 0
      },
      secReplyForm: {
        id: 0,
        maintext: '',
        repuser: ''
      },
      commentList: null,
      commentRule: {
        maintext: [{ required: true, trigger: 'blur', message: '评论内容不能为空' }]
      },
      replyRule: {
        maintext: [{ required: true, trigger: 'blur', message: '回复内容不能为空' }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const postid = window.localStorage.getItem('post_id')
      getComment(postid).then(res => {
        if (res.code === 200) {
          this.commentList = res.data.commentList
          this.title = res.data.title
        }
      })
    },
    // 创建一级回复
    handleFirstComment() {
      const postid = window.localStorage.getItem('post_id')
      this.commentForm.id = postid
      this.$refs.commentForm.validate(valid => {
        if (valid) {
          createFirstComment(this.commentForm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '评论成功',
                type: 'success'
              })
              this.commentForm.maintext = ''
              this.fetchData()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 二级评论
    handleCreateSecReply() {
      this.$refs.secReplyForm[0].validate(valid => {
        if (valid) {
          createSecondComment(this.secReplyForm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '回复成功',
                type: 'success'
              })
              this.secReplyForm.maintext = ''
              this.fetchData()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 打开评论回复输入
    showReplyInput(i, name, id) {
      // this.commentList[this.index].replyShow = false
      this.index = i
      this.commentList[i].replyShow = true
      this.secReplyForm.repuser = name
      this.secReplyForm.id = this.commentList[i].r1id
      // this.toId = id
    },
    _inputShow(i) {
      return this.commentList[i].replyShow
    },
    goBack() {
      this.$router.push('/issue/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-container {
  position: relative;
  padding-left: 50px;
  padding-right: 50px;

  .first-comment {
    padding: 10px;
    // border: 2px solid rgb(160, 156, 156);
    // border-radius: 5px;
    background-color: rgb(250, 248, 248);

    .reply-input {
      margin-left: 40px;
      margin-top: 5px;
      width: 600px;

      .reply-button {
        margin-left: 100%;
        margin-top: 5px;
      }
    }
  }
  .title-container {
    height: 50px;
    width: 65%;
    margin: 30px 100px 10px;
    font-size: 17px;
    font-family: Microsoft YaHei;
  }

  .comment-box {
    margin: 20px 50px;
  }
  .reply-container {
    margin-left: 40px;
    background-color: rgb(243, 245, 245);
  }
  .content-box {
    margin-left: 20px;
    font-size: 17px;
    color: rgb(83, 77, 77);
  }
  .relpy-box {
      padding: 10px;
      // border: 1px solid rgb(160, 156, 156);
      // border-radius: 2px;
  }
}

.info-span {
  margin-top: 20px;
  font-family: Arial;
  font-weight: 700;
  font-size: 20px;
  color: rgb(95, 200, 204);
}

.author-info {
  display: inline-block;

  .author-name {
    display: block;
    font-size: 22px;
    font-weight: 400;
    color: rgb(83, 60, 60);

    .reply-icon {
      font-size: 10px;
      font-family: Kaiti;
      color: burlywood;
      margin-left: 5px;
    }
    .reply-to {
      font-size: 13px;
    }
  }
  .time-info {
    display: block;
    margin-left: 5px;
    margin-top: 2px;
    font-weight: 400;
    font-size: 15px;
    color: rgb(112, 101, 101);
  }
}
.comment-div-container {
  width: 85%;
  margin-left: 50px;
}
</style>
